<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/mui.css">
    <link rel="stylesheet" href="css/hyaStyless.css">
    <link rel="stylesheet" href="css/jokeText.css">
    <title>休闲一刻</title>
</head>

<body>
    <section id="jokeTextPage">
        <div class="modal-overlay" v-if="queryState"></div>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <div class="mui-title">
                文字休闲
            </div>
        </header>
        <div class="mui-content">
            <div class="mui-card" v-for="(item, index) in data" :key="index">
                <!--内容区-->
                <div class="mui-card-content">{{item.text}}</div>
            </div>
        </div>
    </section>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script>
        let jokeTextPage_data = new Vue({
            el: "#jokeTextPage",
            data: function () {
                return {
                    data: [],
                    queryState: true,
                    page:1,
                    nextState:false
                }
            },
            created() {
                this.$nextTick(function(){
                    let that=this;
                    that.getData();
                })
            },
            mounted() {
                this.$nextTick(function(){
                    let that=this;
                    document.addEventListener('touchstart', function (event) {
                        // 判断默认行为是否可以被禁用
                        // if (event.cancelable) {
                        //     // 判断默认行为是否已经被禁用
                        //     if (!event.defaultPrevented) {
                        //         event.preventDefault();
                        //     }
                        // }
                        var documentHeight = $(document).height();
                        var documentScrollTop = $(document).scrollTop();
                        if (documentScrollTop > documentHeight - 1000) {
                            if (!that.nextState) {
                                that.page++;
                                that.nextState = true;
                                that.getData();
                            } else {
                                mui.toast('获取数据中');
                            }
                        }
                    }, false);
                })
            },
            methods:{
                getData:function(){
                    let that=this;
                    $.get('https://www.apiopen.top/satinApi?type=2&page=' + that.page, function (res) {
                        that.queryState = false;
                        that.nextState = false;
                        if (res.code === 200) {
                            res.data.forEach((element, i) => {
                                that.data.push(element);
                            });
                        } else {
                            mui.alert('数据暴乱，点击刷新', function () {
                                location.reload();
                            });
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>